<?php

use backend\models\MallCategory;
use backend\models\MallProduct;
use kartik\file\FileInput;
use yii\helpers\ArrayHelper;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\web\View;
use yii\widgets\ActiveForm;
use wbraganca\dynamicform\DynamicFormWidget;

/* @var $this yii\web\View */
/* @var $model backend\models\MallProduct */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="mall-product-form">

    <?php $form = ActiveForm::begin(['action'=> [''],'options' => ['enctype' => 'multipart/form-data']]); ?>
    <?php
    //封面图开始
    $pluginOptions = [
        // 需要预览的文件格式
        'previewFileType' => 'image',
        // 预览的文件
//            'initialPreview' => ['图片1', '图片2', '图片3'],
        // 需要展示的图片设置，比如图片的宽度等
//            'initialPreviewConfig' => ['width' => '120px'],
        // 是否展示预览图
        'initialPreviewAsData' => true,
        // 异步上传的接口地址设置
        'uploadUrl' => Url::toRoute(['upload/mall-product-img']),
        // 异步上传需要携带的其他参数，比如商品id等
        'uploadExtraData' => [
//            'goods_id' => '111',
        ],
        'uploadAsync' => true,
        // 最少上传的文件个数限制
        'minFileCount' => 1,
        // 最多上传的文件个数限制
        'maxFileCount' => 10,
        // 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
        'showRemove' => true,
        // 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
        'showUpload' => true,
        //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
        'showBrowse' => true,
        // 展示图片区域是否可点击选择多文件
        'browseOnZoneClick' => true,
        // 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
        'fileActionSettings' => [
            // 设置具体图片的查看属性为false,默认为true
            'showZoom' => false,
            // 设置具体图片的上传属性为true,默认为true
            'showUpload' => true,
            // 设置具体图片的移除属性为true,默认为true
            'showRemove' => true,
        ],
        'allowedFileExtensions' => [ 'jpg', 'jpeg', 'png'],
    ];
    if ($model->img) {
        $pluginOptions['initialPreview'] = $model->img;
    }
    echo $form->field($model, 'file')->label('封面')->widget(FileInput::class, [
        'options' => ['multiple' => false],
        'pluginOptions' => $pluginOptions,
        // 一些事件行为
        'pluginEvents' => [
            // 上传成功后的回调方法，需要的可查看data后再做具体操作，一般不需要设置
            "fileuploaded" => "function (event, data, id, index) {
//            alert(data['response']['message']);
            $('#mallproduct-img').val(data['response']['message']);
            console.log(data);
        }",
        ],
    ]);
    //封面图结束

    //展示图开始
    $pluginOptionsMore = [
        // 需要预览的文件格式
//        'initialPreviewFileType' => 'image',
        'previewFileType' => 'image',

        // 预览的文件
//            'initialPreview' => ['图片1', '图片2', '图片3'],
        // 需要展示的图片设置，比如图片的宽度等
//            'initialPreviewConfig' => ['width' => '120px'],
        // 是否展示预览图
        'initialPreviewAsData' => true,
        // 异步上传的接口地址设置
        'uploadUrl' => Url::toRoute(['upload/mall-product-imgs']),
        // 异步上传需要携带的其他参数，比如商品id等
        'uploadExtraData' => [
//            'goods_id' => '111',
        ],
        'uploadAsync' => true,
        // 最少上传的文件个数限制
        'minFileCount' => 1,
        // 最多上传的文件个数限制
        'maxFileCount' => 10,
        // 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
        'showRemove' => true,
        // 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
        'showUpload' => true,
        //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
        'showBrowse' => true,
        // 展示图片区域是否可点击选择多文件
        'browseOnZoneClick' => true,
        // 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
        'fileActionSettings' => [
            // 设置具体图片的查看属性为false,默认为true
            'showZoom' => false,
            // 设置具体图片的上传属性为true,默认为true
            'showUpload' => true,
            // 设置具体图片的移除属性为true,默认为true
            'showRemove' => true,
        ],

        'allowedFileExtensions' => [ "jpg", "jpeg", "png"],
    ];

    if ($model->imgs) {
        // 切割图片后展示
        $allImages = explode(',', $model->imgs);
        $pluginOptionsMore['initialPreview'] = $allImages; // 做成数组放在此处
    }
    echo $form->field($model, 'files')->label('展示图')->widget(FileInput::class, [
        'options' => ['multiple' => true],
        'pluginOptions' => $pluginOptionsMore,
        // 一些事件行为
        'pluginEvents' => [
            // 上传成功后的回调方法，需要的可查看data后再做具体操作，一般不需要设置
            "fileuploaded" => "function (event, data, id, index) {
//            alert(data['response']['message']);
//            $('#mallvideo-video_url').val(data['response']['message']);
            $('#mallproduct-imgs').val($('#mallproduct-imgs').val() + data['response']['message']);
            console.log(data);
        }",
        ],
    ]);
    //展示图结束


    //视频上传开始
    $pluginOptionsVideo = [
        // 需要预览的文件格式
        'initialPreviewFileType' => 'video',
        'previewFileType' => 'video',

        // 预览的文件
//            'initialPreview' => ['图片1', '图片2', '图片3'],
        // 需要展示的图片设置，比如图片的宽度等
//            'initialPreviewConfig' => ['width' => '120px'],
        // 是否展示预览图
        'initialPreviewAsData' => true,
        // 异步上传的接口地址设置
        'uploadUrl' => Url::toRoute(['upload/mall-product-video']),
        // 异步上传需要携带的其他参数，比如商品id等
        'uploadExtraData' => [
//            'goods_id' => '111',
        ],
        'uploadAsync' => true,
        // 最少上传的文件个数限制
        'minFileCount' => 1,
        // 最多上传的文件个数限制
        'maxFileCount' => 10,
        // 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
        'showRemove' => true,
        // 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
        'showUpload' => true,
        //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
        'showBrowse' => true,
        // 展示图片区域是否可点击选择多文件
        'browseOnZoneClick' => true,
        // 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
        'fileActionSettings' => [
            // 设置具体图片的查看属性为false,默认为true
            'showZoom' => false,
            // 设置具体图片的上传属性为true,默认为true
            'showUpload' => true,
            // 设置具体图片的移除属性为true,默认为true
            'showRemove' => true,
        ],

        'allowedFileExtensions' => [ "mp4", "3gp"],
    ];

    if ($model->video_url) {
        $pluginOptionsVideo['initialPreview'] = $model->video_url; //TODO 做成数组放在此处
    }
    echo $form->field($model, 'file_video')->label('产品视频')->widget(FileInput::class, [
        'options' => ['multiple' => true],
        'pluginOptions' => $pluginOptionsVideo,
        // 一些事件行为
        'pluginEvents' => [
            // 上传成功后的回调方法，需要的可查看data后再做具体操作，一般不需要设置
            "fileuploaded" => "function (event, data, id, index) {
//            alert(data['response']['message']);
//            $('#mallvideo-video_url').val(data['response']['message']);
            $('#mallproduct-video_url').val($('#mallproduct-video_url').val() + data['response']['message']);
            console.log(data);
        }",
        ],
    ]);
    //视频上传结束

    //详情图开始
    $pluginOptionsDetail = [
        // 需要预览的文件格式
        'previewFileType' => 'image',
        // 预览的文件
//            'initialPreview' => ['图片1', '图片2', '图片3'],
        // 需要展示的图片设置，比如图片的宽度等
//            'initialPreviewConfig' => ['width' => '120px'],
        // 是否展示预览图
        'initialPreviewAsData' => true,
        // 异步上传的接口地址设置
        'uploadUrl' => Url::toRoute(['upload/mall-product-detail']),
        // 异步上传需要携带的其他参数，比如商品id等
        'uploadExtraData' => [
//            'goods_id' => '111',
        ],
        'uploadAsync' => true,
        // 最少上传的文件个数限制
        'minFileCount' => 1,
        // 最多上传的文件个数限制
        'maxFileCount' => 10,
        // 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
        'showRemove' => true,
        // 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
        'showUpload' => true,
        //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
        'showBrowse' => true,
        // 展示图片区域是否可点击选择多文件
        'browseOnZoneClick' => true,
        // 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
        'fileActionSettings' => [
            // 设置具体图片的查看属性为false,默认为true
            'showZoom' => false,
            // 设置具体图片的上传属性为true,默认为true
            'showUpload' => true,
            // 设置具体图片的移除属性为true,默认为true
            'showRemove' => true,
        ],
        'allowedFileExtensions' => [ 'jpg', 'jpeg', 'png'],
    ];
    if ($model->detail) {
        //TODO处理","切割展示
        $allImageDetail = explode(',', $model->detail);
        $pluginOptionsDetail['initialPreview'] = $allImageDetail; // 数组放置后展示
    }
    echo $form->field($model, 'file_detail')->label('详情图(可选)')->widget(FileInput::class, [
        'options' => ['multiple' => true],
        'pluginOptions' => $pluginOptionsDetail,
        // 一些事件行为
        'pluginEvents' => [
            // 上传成功后的回调方法，需要的可查看data后再做具体操作，一般不需要设置
            "fileuploaded" => "function (event, data, id, index) {
//            alert(data['response']['message']);
//            $('#mallvideo-img').val(data['response']['message']);
            $('#mallproduct-detail').val($('#mallproduct-detail').val() + data['response']['message']);
            console.log(data);
        }",
        ],
    ]);
    //详情图结束
    ?>
    <?php ActiveForm::end(); ?>

    <?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>

    <?= $form->field($model, 'aid')->textInput() ?>

    <?= $form->field($model, 'mid')->textInput() ?>

    <?= $form->field($model, 'cid')->dropDownList(
        ArrayHelper::map(MallCategory::find()->where(['status' => 1])->all(), 'id', 'name'),
        ['prompt'=> '选择分类']
    ) ?>

    <?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'img')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'imgs')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'video_url')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'detail')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'detail_text')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'old_price')->textInput(['type' => 'float']) ?>

    <?= $form->field($model, 'freight')->textInput(['type' => 'float']) ?>

    <?= $form->field($model, 'sort')->textInput(['type' => 'number']) ?>

    <?= $form->field($model, 'count_sale')->textInput(['type' => 'number']) ?>

    <?= $form->field($model, 'is_up')->dropDownList(MallProduct::attributeValue()['is_up']) ?>

<!--    --><?//= $form->field($model, 'up_time')->textInput() ?>

<!--    --><?//= $form->field($model, 'update_time')->textInput() ?>

<!--    --><?//= $form->field($model, 'create_time')->textInput() ?>

    <?= $form->field($model, 'status')->dropDownList(MallProduct::attributeValue()['status']) ?>

    <?= $form->field($model, 'label')->textInput() ?>

    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading"><h4><i class="glyphicon glyphicon-envelope"></i> 属性-库存-价格</h4></div>
            <div class="panel-body">
                <?php DynamicFormWidget::begin([
                    'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
                    'widgetBody' => '.container-items', // required: css class selector
                    'widgetItem' => '.item', // required: css class
                    'limit' => 15, // the maximum times, an element can be cloned (default 999)
                    'min' => 1, // 0 or 1 (default 1)
                    'insertButton' => '.add-item', // css class
                    'deleteButton' => '.remove-item', // css class
                    'model' => $modelSku[0],
                    'formId' => 'dynamic-form',
                    'formFields' => [
                        'value',
                        'stock',
                        'price',
                        'product_no',
                    ],
                ]); ?>

                <div class="container-items"><!-- widgetContainer -->
                    <?php foreach ($modelSku as $i => $modelSkuOne): ?>
                        <div class="item panel panel-default"><!-- widgetBody -->
                            <div class="panel-heading">
<!--                                <h3 class="panel-title pull-left">请填写</h3>-->
                                <div class="pull-right">
                                    <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
                                    <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <div class="panel-body">
                                <?php
                                // necessary for update action.
                                if (! $modelSkuOne->isNewRecord) {
                                    echo Html::activeHiddenInput($modelSkuOne, "[{$i}]id");
                                }
                                ?>
<!--                                --><?//= $form->field($modelsMallProductSpecss, "[{$i}]value")->textInput(['maxlength' => true]) ?>
                                <div class="row">
                                    <?php

                                    //展示图开始
                                    $pluginOptionOne{$i} = [
                                        // 需要预览的文件格式
                                        //'initialPreviewFileType' => 'image',
                                        'previewFileType' => 'image',
                                        // 预览的文件
                                        //'initialPreview' => ['图片1', '图片2', '图片3'],
                                        // 需要展示的图片设置，比如图片的宽度等
                                        // 'initialPreviewConfig' => ['width' => '120px'],
                                        // 是否展示预览图
                                        'initialPreviewAsData' => true,
                                        // 异步上传的接口地址设置
                                        'uploadUrl' => Url::toRoute(["upload/mall-product-specs"]),
                                        // 异步上传需要携带的其他参数，比如商品id等
                                        'uploadExtraData' => [
//                                            'arr' => $i,
                                        ],
                                        'uploadAsync' => true,
                                        // 最少上传的文件个数限制
                                        'minFileCount' => 1,
                                        // 最多上传的文件个数限制
                                        'maxFileCount' => 10,
                                        // 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮
                                        'showRemove' => true,
                                        // 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮
                                        'showUpload' => true,
                                        //是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮
                                        'showBrowse' => true,
                                        // 展示图片区域是否可点击选择多文件
                                        'browseOnZoneClick' => true,
                                        // 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
                                        'fileActionSettings' => [
                                            // 设置具体图片的查看属性为false,默认为true
                                            'showZoom' => false,
                                            // 设置具体图片的上传属性为true,默认为true
                                            'showUpload' => true,
                                            // 设置具体图片的移除属性为true,默认为true
                                            'showRemove' => true,
                                        ],

                                        'allowedFileExtensions' => ["jpg", "jpeg", "png"],
                                    ];

                                    if ($modelSkuOne->img) {
                                        // 切割图片后展示
                                        $allImage = explode(',', $modelSkuOne->img);
                                        $pluginOptionOne{$i}['initialPreview'] = $allImage; // 做成数组放在此处
                                    }
                                    echo $form->field($modelSkuOne, "[{$i}]file")->label('规格图')->widget(FileInput::class, [
                                        'options' => ['multiple' => true],
                                        'pluginOptions' => $pluginOptionOne{$i},
                                        // 一些事件行为
                                        'pluginEvents' => [
                                            // 上传成功后的回调方法，需要的可查看data后再做具体操作，一般不需要设置
                                            "fileuploaded" => "function (event, data, id, index) {
                                                var num = data['response']['num'];
                                                $('#mallproductspecs-'+ num +'-img').val($('#mallproductspecs-'+ num +'-img').val() + data['response']['message']);
                                                console.log(data);
                                            }",
                                        ],
                                    ]);
                                    //展示图结束

                                    ?>

                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <?= $form->field($modelSkuOne, "[{$i}]img")->label('规格图url')->textarea(['rows' => 6]) ?>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <?= $form->field($modelSkuOne, "[{$i}]value")->label('属性值(填颜色 尺寸等,当不填的时候填默认值-1)')->textInput() ?>
                                    </div>
                                    <div class="col-sm-4">
                                        <?= $form->field($modelSkuOne, "[{$i}]stock")->textInput(['maxlength' => true, 'type'=>'number']) ?>
                                    </div>
                                    <div class="col-sm-4">
                                        <?= $form->field($modelSkuOne, "[{$i}]price")->textInput(['maxlength' => true, 'type'=> 'float']) ?>
                                    </div>
                                </div><!-- .row -->
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <?php DynamicFormWidget::end(); ?>
            </div>
        </div>
    </div>

    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>
<?php
$js = <<< SCRIPT
    $(".container-items").on("click",".add-item", function() {
    $(".container-items").on("fileuploaded",function(event, data, id, index) {
        var num = data['response']['num'];
        $('#mallproductspecs-'+ num +'-img').val($('#mallproductspecs-'+ num +'-img').val() + data['response']['message']);
        console.log(data);
    })
});
    
SCRIPT;
$this->registerJs($js, View::POS_END);
$jsSource = <<<JS
    $('source').attr("type","video/mp4");
JS;
$this->registerJs($jsSource);
?>
